﻿@page "/datafilter"

<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    DataFilter
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
    Filter Entity Framework <strong>IQueryable</strong> without extra code.
</RadzenText>

<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
    In this demo filter <strong>Orders</strong> by OrderID (multi-select dropdown), ProductIds (nested collection), Products (through OrderDetails), Employee Last Name, Order Date (custom DatePicker template), and Freight, with toggle between auto-filter and manual <strong>Apply Filter</strong> button, pre-filtered to employees containing "Buchanan".
</RadzenText>

<RadzenExample ComponentName="DataFilter" Example="DataFilterIQueryable">
    <DataFilterIQueryable />
</RadzenExample>

<RadzenText Anchor="datafilter#keyboard-navigation" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Keyboard Navigation
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    The following keys or key combinations provide a way for users to navigate and interact with Radzen Blazor DataFilter component.
</RadzenText>

<KeyboardNavigationDataGrid Data="@shortcuts" />

@code {
    public List<KeyboardShortcut> shortcuts = new()
    {
        new KeyboardShortcut { Key = "Tab", Action = "Navigate forward across available filter components." },
        new KeyboardShortcut { Key = "Shift + Tab", Action = "Navigate backward across available filter components." }
    };
}
